<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <div slot="header" class="welcome-header">
            <span>欢迎使用多链钱包集成系统</span>
          </div>
          <div class="welcome-content">
            <div class="system-intro">
              <i class="el-icon-wallet system-logo"></i>
              <h2>{{ username }}，欢迎回来！</h2>
              <p class="intro-text">
                多链钱包集成系统是一个集成多种区块链网络的钱包管理平台，支持以太坊等主流区块链，为用户提供安全、便捷的数字资产管理服务。
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="section-row">
      <el-col :span="24">
        <div class="section-title">
          <h3>系统功能</h3>
          <div class="title-line"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="feature-cards">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="feature-card">
          <div slot="header">
            <span>钱包管理</span>
          </div>
          <div class="feature-content">
            <i class="el-icon-wallet"></i>
            <p>绑定您的以太坊钱包地址，查看钱包余额和资产</p>
            <el-button
              type="primary"
              size="small"
              @click="$router.push('/wallet')"
              >前往</el-button
            >
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="feature-card">
          <div slot="header">
            <span>铸造NFT</span>
          </div>
          <div class="feature-content">
            <i class="el-icon-picture-outline"></i>
            <p>使用系统资金铸造NFT到您的钱包地址</p>
            <el-button
              type="primary"
              size="small"
              @click="$router.push('/mint-nft')"
              >前往</el-button
            >
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="feature-card">
          <div slot="header">
            <span>交易记录</span>
          </div>
          <div class="feature-content">
            <i class="el-icon-document"></i>
            <p>查看您的所有交易记录和状态</p>
            <el-button
              type="primary"
              size="small"
              @click="$router.push('/transactions')"
              >前往</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="section-row">
      <el-col :span="24">
        <div class="section-title">
          <h3>使用指南</h3>
          <div class="title-line"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="guide-card">
          <div class="guide-content">
            <div class="guide-item">
              <div class="guide-icon">
                <i class="el-icon-wallet"></i>
              </div>
              <div class="guide-text">
                <h4>1. 钱包管理</h4>
                <p>
                  在"钱包管理"页面，您可以绑定以太坊钱包地址，查看钱包余额和资产列表。系统支持多种以太坊网络，包括主网和测试网。
                </p>
              </div>
            </div>

            <div class="guide-item">
              <div class="guide-icon">
                <i class="el-icon-picture-outline"></i>
              </div>
              <div class="guide-text">
                <h4>2. NFT铸造</h4>
                <p>
                  在"铸造NFT"页面，您可以使用系统提供的资金铸造NFT到您的钱包地址。选择您想要的NFT类型，填写相关信息，一键铸造。
                </p>
              </div>
            </div>

            <div class="guide-item">
              <div class="guide-icon">
                <i class="el-icon-document"></i>
              </div>
              <div class="guide-text">
                <h4>3. 交易记录</h4>
                <p>
                  在"交易记录"页面，您可以查看所有与您钱包相关的交易历史，包括转账、NFT铸造等操作，并可查看详细的交易状态和信息。
                </p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Dashboard",
  data() {
    return {};
  },
  computed: {
    username() {
      const user = JSON.parse(localStorage.getItem("user") || "{}");
      return user.username || "";
    },
  },
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.welcome-header {
  font-size: 18px;
  font-weight: bold;
}

.welcome-content {
  padding: 20px 0;
}

.system-intro {
  text-align: center;
  padding: 20px 0;
}

.system-logo {
  font-size: 60px;
  color: #409eff;
  margin-bottom: 20px;
}

.intro-text {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  color: #606266;
  font-size: 16px;
}

.section-row {
  margin-top: 20px;
  margin-bottom: 10px;
}

.section-title {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.section-title h3 {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.title-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #409eff;
}

.feature-cards {
  margin-top: 20px;
}

.feature-card {
  margin-bottom: 20px;
  height: 200px;
  transition: all 0.3s;
  border-radius: 8px;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  text-align: center;
}

.feature-content i {
  font-size: 32px;
  margin-bottom: 10px;
  color: #409eff;
}

.feature-content p {
  margin-bottom: 15px;
  color: #606266;
}

.guide-card {
  margin-bottom: 30px;
  border-radius: 8px;
}

.guide-content {
  padding: 20px;
}

.guide-item {
  display: flex;
  margin-bottom: 30px;
}

.guide-item:last-child {
  margin-bottom: 0;
}

.guide-icon {
  flex: 0 0 60px;
  height: 60px;
  background-color: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.guide-icon i {
  font-size: 30px;
  color: #409eff;
}

.guide-text h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #303133;
}

.guide-text p {
  color: #606266;
  line-height: 1.8;
}
</style>
